<template>
    <view class="content" :style="{ paddingBottom: (waitOrderList.length > 2) ? '200rpx' : '0' }">
        <view class="list" v-if="waitOrderList.length > 0">
            <view class="order_card mb24" v-for="(item, index) in waitOrderList" :key="index" @click="toDetial(item)">
                <view class="order_card_head flex_b">
                    <view class="order_card_head_l">订单详情</view>
                    <!-- 订单状态 待接单 -->
                    <view v-if="item.status == 1" class="order_card_head_r" style="color: #FE6E04;">{{ `已经等待
                        ${getTime(item.createTime)}` }}</view>
                    <!-- 订单状态 已取消 -->
                    <view v-if="item.status == 4" class="order_card_head_r" style="color: #888888;">订单已取消</view>
                </view>
                <view class="order_card_content">
                    <view class="work">
                        <view class="_icon">
                            <image src="@/static/images/customerPage/icon_work.png" mode="scaleToFill" />
                        </view>
                        <view class="_text">{{ item.workType }}</view>
                    </view>
                    <view class="address">
                        <view class="_icon">
                            <image src="@/static/images/customerPage/icon_address.png" mode="scaleToFill" />
                        </view>
                        <view class="_text">{{ item.workPlace }}</view>
                    </view>
                    <view class="time">
                        <view class="_icon">
                            <image src="@/static/images/customerPage/icon_time.png" mode="scaleToFill" />
                        </view>
                        <view class="_text">{{ item.workDate }}</view>
                    </view>
                </view>
                <view class="order_card_foot flex_b">
                    <view class="order_card_foot_l" @click.stop="cancelOrder(item)">{{ item.status == 1 ? '取消订单' : ' '
                        }}
                    </view>
                    <view v-if="item.status == 1 && !hasNoPay(item)" class="order_card_foot_r flex_c"
                        @click.stop="toAddPrice(item.id as string)">加价</view>
                    <view v-if="item.status == 1 && hasNoPay(item)" class="order_card_foot_r flex_c"
                        @click.stop="toPay(item.id as string)">支付加价单</view>
                    <view v-if="item.status == 4" class="order_card_foot_r flex_c" @click.stop="toHome">重新发单</view>
                </view>
            </view>
        </view>
        <!-- 空列表 -->
        <up-empty mode="order" marginTop="150" v-else></up-empty>
    </view>
</template>

<script setup lang="ts">
/*
* 待接单订单状态说明
*    1 待接单 已等待xxx分钟(前端计算)  
*       按钮 
*           取消订单(左) 支付过且未接单的订单可以取消 取消后直接退款(退款结束后只改状态,不刷新列表,防止刷新后找不到单子)
*           加价(右) 等待时间过长可以加价 跳转到加价页加价
*           支付加价单(右) 如果有未支付的加价单 显示加价 跳转到加价页支付
*    2 已取消 订单已取消 
*       按钮 重新发单(右) 跳转到首页
*
*/
import { refundOrder } from '@/api/customerPage/order'
import type { OrderParams } from '@/types/order';
import { getTimeDiff } from '@/utils'
defineProps<{
    waitOrderList: OrderParams[]
}>()

const emit = defineEmits(["refreshWaitOrder"])

// 取消订单
const cancelOrder = async (item: any) => {
    if(item.status !== 1) return
    uni.showModal({
        content: '确定取消订单？',
        success: (res) => {
            if (res.confirm) {
                cancel(item)
            }
        }
    })
}
const cancel = (async (item: any) => {
    uni.showLoading({
        title: '取消中...',
        mask:true,
    })
    const par = {
        id: item.id,
        refundPrice: item.money
    }
    try {
        const res: any = await refundOrder(par)
        if (res.code == 0) {
            uni.showToast({
                title: '取消成功'
            })
            item.status = 4
        }
    } finally {
        uni.hideLoading()
    }
})
// 跳转订单详情
const toDetial = ((item: any) => {
    uni.navigateTo({
        url: `/pages/customerPage/orderDetial/orderDetial?status=0&id=${item.id}`
    })
})

// 重新发单 跳转到首页
const toHome = () => {
    uni.switchTab({
        url: '/pages/tabbar/home/home'
    })
}

// 加价 跳转到用工详情页 并且带上订单id
const toAddPrice = (id: string) => {
    uni.navigateTo({
        url: `/pages/customerPage/addPrice/addPrice?id=${id}`
    })
}
// 支付加价单
const toPay = (id: string) => {
    uni.navigateTo({
        url: `/pages/customerPage/addPrice/addPrice?id=${id}`
    })
}

/// 计算时间差
const getTime = (time: any) => {
    const startTime = time
    const endDtime = new Date().getTime()
    return getTimeDiff(startTime, endDtime)
}

// 判断是否有未支付的支付单
const hasNoPay = (item: any) => {
    return item.payList.some((payItem: any) => {
        return payItem.payStatus == 0
    })
}

</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    padding-top: 24rpx;
}

.list {
    width: 698rpx;
    margin: 0 auto;
}

.order_card {
    width: 698rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
}

.order_card_head {
    width: 100%;
    height: 94rpx;
    border-bottom: 2rpx solid #F8F8F8;

    &_l {
        font-weight: 500;
        font-size: 30rpx;
        color: #222222;
    }

    &_r {
        font-size: 26rpx;
    }
}

.order_card_content {
    width: 100%;
    border-bottom: 2rpx solid #F8F8F8;

    .order_id {
        font-size: 28rpx;
        color: #222222;
        margin-top: 24rpx;
    }

    .work,
    .address {
        width: 100%;
        min-height: 40rpx;
        display: flex;
        align-items: flex-start;
        margin-top: 24rpx;
    }

    ._icon {
        width: 38rpx;
        height: 38rpx;
        margin-right: 14rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    ._text {
        width: calc(100% - 38rpx - 14rpx);
        font-size: 28rpx;
        color: #222222;
    }

    .time {
        width: 100%;
        min-height: 40rpx;
        display: flex;
        align-items: flex-start;
        margin: 26rpx 0;

        ._icon {
            width: 28rpx;
            height: 28rpx;
        }

        ._text {
            color: #888888;
        }
    }
}

.order_card_foot {
    width: 100%;
    height: 102rpx;

    &_l {
        font-size: 30rpx;
        color: #888888;
    }

    &_r {
        width: fit-content;
        background: #FE6E04;
        border-radius: 35rpx 35rpx 35rpx 35rpx;
        font-size: 30rpx;
        color: #FFFFFF;
        padding: 12rpx 40rpx;
        letter-spacing: 0.1em;
    }
}
</style>